<template>
	<el-main>
		<el-row class="login-form">
			<el-col :span="12" class="logo">&nbsp;</el-col>
			<el-col :span="12">
				<h1 class="align-center">社团管理后台登陆</h1>
				<el-form label-position="top">
					<el-form-item>
						<el-input v-model="loginForm.number" prefix-icon="el-icon-user" placeholder="用户名"></el-input>
					</el-form-item>
					<el-form-item>
						<el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password" placeholder="密码" @keyup.enter.native="dologin"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="dologin">登陆</el-button>
						<el-button type="primary" @click="doregist">注册</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	export default {
		data() {
			return {
				checked: true,
				loginForm: {
					number: '',
					password: ''
				}
			}
		},
		methods: {
			doregist() {
				this.$router.push({
					path: '/regist/'
				})
				},
			dologin() {
				if (this.loginForm.number.trim() === '' || this.loginForm.password.trim() === '') {
					this.$message({
						type: '错误',
						message: '请输入用户名和密码'
					})
					return
				}
				
				this.$axios({
					method: 'get',
					url: '/user/login',
					params: {
						number: this.loginForm.number,
						password: this.loginForm.password,
					}
				}).then(res => {
					console.log(res)
					if (res.data.state == true) {
						this.$cookie.set("id", res.data.user.id)
						this.$cookie.set("number", res.data.user.number)
						this.$cookie.set("password", res.data.user.password)
						this.$cookie.set("name", res.data.user.name)
						this.$cookie.set("department", res.data.user.department)
						this.$cookie.set("major", res.data.user.major)
						this.$cookie.set("type", res.data.user.type)
						this.$cookie.set("phone", res.data.user.phone)
						this.$cookie.set("sex", res.data.user.sex)
						this.$cookie.set("age", res.data.user.age)
						this.$cookie.set("remarks", res.data.user.remarks)
						this.$cookie.set("jointime", res.data.user.jointime)
						this.$cookie.set("dateline", res.data.user.dateline)
						this.$router.push({path: '/manage/'})
						this.$message(this.$cookie.get("name") + "登陆成功")
					} else {
						this.$message(res.data.msg);
					}
				}).catch(err => {
					this.$message(err)
				})
			},
			enter(e){
				this.dologin()
			}
		}
	}
</script>

<style scoped>
	.el-main {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		width: 100%;
		height: 100%;
		background: url(/static/login.jpg) no-repeat;
		background-size: cover;
	}

	.login-form {
		border-radius: 5px;
		overflow: hidden;
		display: flex;
		background: #FFF;
		width: 700px;
		height: 250px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
	}

	.el-form {
		margin: 20px;
	}

	.logo {
		background: url(/static/login_box.jpg) no-repeat;
		background-size: cover;
	}
</style>
